<template>
    <transition name="fade">
        <div class="detail-container">

            <div :style="{background:'url('+img1+') repeat'}" class="bg-panel">
                <div class="bg-mask" :style="{background:mask_color}"></div>
            </div>
            <div class="header">
                <a class="left" v-on:click="back()"><img src="../../assets/back.png" ></a>
                <router-link to="shopping-pack" class="right"><img src="../../assets/shopping_pack.png"></router-link>
            </div>
            <div class="image-panel">
                <div class="item" :style="{background:'url('+img+') no-repeat center / contain'}"></div>
            </div>
            <div class="info-panel">
                <div class="box box_1">
                    <div class="pull-left">运费 20</div>
                    <div class="pull-left">月销 204</div>
                    <div class="pull-left">SUPER MASKY</div>
                </div>
                <div class="label-list">
                    <span class="item">硬货</span>
                    <span class="item">7天包退</span>
                    <span class="item">零返修</span>
                </div>
                <div class="title">
                    hinkPad New S2 2017（02CD）13.3英寸轻薄笔记本电脑
                    <p class="desc"><small>限时限量！轻至1.47KG，金属A面，SSD固态硬盘！【ThinkPad】引领高品质生活~白条6期免息~价保详情》</small></p>
                </div>
                <div class="price-now">￥1000 <del class="price-old">￥1500</del></div>
                <a class="add-cart">加入购物袋</a>

            </div>
            <div class="more" v-on:click="show_pop()">
                <p>查看详情</p>
                <a ><img src="../../assets/down.png"></a>
            </div>
            <m-pop ref="detail_pop">
                <div class="detail-container">
                    <div class="top-tab">
                        <a class="back" v-on:click="close_pop()"><img src="../../assets/back1.png" ></a>
                        <a class="item" :class="{on:tab_index==0}" v-on:click="change_tab(0)">详细内容</a>
                        <a class="item" :class="{on:tab_index==1}" v-on:click="change_tab(1)">评价</a>
                    </div>
                    <div class="top-tab-content" v-if="tab_index==0" >
                        <p>
                      <span>

                          <img src="https://img20.360buyimg.com/vc/jfs/t3106/6/5873518167/206091/5dda4df2/589544e9N89fafd61.jpg"><br>
                          <img src="https://img20.360buyimg.com/vc/jfs/t3274/26/5833813513/155908/973b7df8/589544e9N62063736.jpg"><br>
                          <img src="https://img20.360buyimg.com/vc/jfs/t3280/281/9769121149/198944/10cf6b00/58db5715Ncf61f579.jpg"><br>
                          <img src="https://img20.360buyimg.com/vc/jfs/t11380/102/755562254/193465/b979c7a4/59f7f264N2e96a3b2.jpg"><br>
                          <img src="https://img20.360buyimg.com/vc/jfs/t3916/32/1821118859/84624/d0680126/589544eaN5fca8a72.jpg"><br>
                          <img src="https://img20.360buyimg.com/vc/jfs/t4012/21/1686390795/140451/65d33ea2/589544eaN7b879396.jpg"><br>
                          <img src="https://img20.360buyimg.com/vc/jfs/t3226/28/5985191312/182406/8d1b47b4/589544ebN9d7dd41d.jpg"><br>
                          <img src="https://img20.360buyimg.com/vc/jfs/t3814/42/3457959270/157924/c089ec74/589544ebN569a3eff.jpg"><br>
                          <img src="https://img20.360buyimg.com/vc/jfs/t3181/38/6033233353/104024/a9e5f598/589544ecN24dde2ff.jpg"><br>
                          <img src="https://img20.360buyimg.com/vc/jfs/t3964/41/1728745309/81482/79034551/589544ecN71e6a44f.jpg"><br>
                          <img src="https://img20.360buyimg.com/vc/jfs/t3301/115/5946507376/57292/82bc7159/589544edN0c24b697.jpg"><br>
                      </span>
                        </p>
                    </div>
                    <div class="top-tab-content comment-list" ref="comment_list" v-if="tab_index==1" >
                        <div class="box">
                            <span class="pull-left">评价（66）</span>
                            <span class="pull-right">好评率99%</span>
                        </div>
                        <div class="item">
                            <img src="../../assets/avatar.jpg" class="avatar">
                            <div class="info">
                                <div class="name">masky<span class="star"><img src="../../assets/star.png"><img src="../../assets/star.png"><img src="../../assets/star.png"><img src="../../assets/star.png"><img src="../../assets/star.png"></span></div>
                                <div class="content">很棒棒哦！很舒服~</div>
                                <div class="date">2017-8-9 12:2:0</div>
                            </div>
                        </div>
                        <div class="loading">没有更多了~</div>
                    </div>
                </div>
            </m-pop>
        </div>
    </transition>
</template>

<script>
	import m_pop from "../common/m_pop.vue"
export default {
    name: 'shopping_pack',
    data () {
        return {
            img:require('@/assets/goods/4.png'),
			img1:require('@/assets/bg.jpg'),
            mask_color:'rgba(0,0,0,0.6)',
            tab_index:0,
            touchY:0,
            endY:0,
            is_show:false
        }
    },
	created (){
    	let self=this;
		window.addEventListener('touchstart',function (e)
		{
			let touch=e.targetTouches[0];
			 self.touchY=touch.pageY;
		});
		window.addEventListener('touchmove',function (e)
		{
			let touch=e.targetTouches[0];
			self.endY=touch.pageY;

		});
		window.addEventListener('touchend',function (e)
		{
			if(!self.is_show && self.calcScroll() && self.touchY-self.endY>100){
				self.show_pop();
			}
		});
    },
    methods:{
    	change_tab:function (i)
		{
          this.tab_index=i;
		},
		go_buy:function ()
		{
            this.$router.push('/order-confirm')
		},
		back:function ()
		{
            this.$router.back();
		},
		show_pop:function ()
		{
			this.is_show=true;
			this.$refs.detail_pop.show();
		},
		close_pop:function ()
		{
			this.is_show=false;
			this.$refs.detail_pop.close();
		},
		getScrollTop:function (){
            let scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
            if(document.body){
                bodyScrollTop = document.body.scrollTop;
            }
            if(document.documentElement){
                documentScrollTop = document.documentElement.scrollTop;
            }
            scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
            return scrollTop;
        },
        getScrollHeight:function (){
			let scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
            if(document.body){
                bodyScrollHeight = document.body.scrollHeight;
            }
            if(document.documentElement){
                documentScrollHeight = document.documentElement.scrollHeight;
            }
            scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
            return scrollHeight;
	    },
        getWindowHeight:function (){
			let windowHeight = 0;
            if(document.compatMode == "CSS1Compat"){
                windowHeight = document.documentElement.clientHeight;
            }else{
                windowHeight = document.body.clientHeight;
            }
            return windowHeight;
        },
        calcScroll:function ()
		{
			if(this.getScrollTop() + this.getWindowHeight() == this.getScrollHeight()){
				return true;
			}else{
				return false;
            }
		}
    },
	components:{
		'm-pop':m_pop
	}

}
</script>

<style scoped>
    .comment-list .box{
        padding: 15px 10px;
        border-bottom: 1px solid #f4f4f4;
        overflow: hidden;
    }
    .comment-list .box span{
        color: #777;
    }
    .comment-list .item{
        overflow: hidden;
        width: 100%;
        min-height: 70px;
        position: relative;
        border-bottom: 1px solid #f4f4f4;
    }
    .comment-list .item .avatar{
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        left: 10px;
        top:10px;
    }
    .comment-list .info{
        margin-left: 60px;
        padding: 10px;
        position: relative;
    }
    .comment-list .info .star{
        display: block;
        position: absolute;
        right: 10px;
        top:5px;

    }
    .comment-list .info .name{
        font-size: 0.9rem;
    }
    .comment-list .info .name .star img{
        height: 22px;
    }
    .comment-list .info .date{
        color: #999;
        font-size: 0.6rem;

    }
    .comment-list .info .content{
        padding: 5px 0;

    }
    .detail-container{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .detail-container img{
        max-width: 100%!important;
    }
    .top-tab-content{
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
        height: calc(100% - 100px);
        background: #fff;
        margin-top: 100px;
        width: 100%;
    }
    .top-tab{
        height: 50px;
        overflow: hidden;
        background: #fff;
        position: fixed;
        width: 100%;
        top: 50px;
        left: 0;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .top-tab .item{
        width: 45%;
        display: block;
        box-sizing: border-box;
        float: left;
        height: 50px;
        line-height: 48px;
        text-align: center;
        transition: 0.3s all;
        border-bottom: 2px solid #fff;
    }
    .top-tab .item.on{
        border-bottom: 2px solid #E30000;
        color: #E30000;
    }
    .top-tab .back{
        width: 10%;
        padding-left: 10px;
        padding-top: 16px;
        box-sizing: border-box;
        display: block;
        text-align: left;
        float: left;
    }
    .top-tab .back img{
        height: 18px;
    }
    #app{
        background: transparent;
    }
    .header{
        background: transparent;
        box-shadow: none;
    }
    .bg-panel{
        height: 100%;
        width: 100%;
        position: fixed;
        left: 0;
        top:0;
        z-index: 0;
    }
    .bg-mask{
        height: 100%;
        width: 100%;
    }
    .more{
        display: block;
        width: 120px;
        margin: 5px auto;
        text-align: center;
        color: #fff;
       position: relative;
        z-index: 2;
        text-shadow: 0 0 5px #333;
    }
    .more img{
        width: 22px;
    }
    .box_1{
        margin-bottom: 5px;
        text-align: left;
        overflow: hidden;
        border-top: 1px dotted #999;
        border-bottom: 1px dotted #999;
    }
    .box_1 div{
        width: 33.3333%;
        font-size: 0.8rem;
        line-height: 1.2rem;
    }
    .detail-container{
        height: 100%;
    }
    .info-panel{
        border-radius: 15px;
        box-shadow: 0 0 20px rgba(0,0,0,0.7);
        position: relative;
        padding: 15px 10px;
        background: #fff;
        margin: 20px;
        border: 1px solid #666;
    }
    .add-cart{
        display: block;
        margin: 15px auto;
        width: 60%;
        height: 45px;
        background: linear-gradient(to right bottom,#E30000,#f30000);
        border-radius: 30px;
        border:1px solid #E30000;
        box-shadow: 0 0 10px #fa1122;
        text-align: center;
        line-height: 45px;
        color: #ffffff;
        font-size: 1.1rem;
    }
    .label-list{
        overflow: hidden;
    }
    .label-list .item{
        display: block;
        float: left;
        border:1px solid #333;
        color: #fff;
        padding: 1px 4px;
        font-size: 0.8rem;
        background: #333333;
        margin-right: 2px;
    }
    .title{
        padding: 10px 0;
        font-size: 1.2rem;
        font-weight: bold;
    }
    .price-now{
        margin-top: 5px;
        color: #E30000;
        font-size: 1.3rem;
        font-weight: bold;
    }
    .price-old{
        color: #999999;
        font-weight: normal;
        font-size: 1rem;
    }
    small{
        color: #666;
    }
    .image-panel{
        width: 100%;
        height: 40%;
        overflow: hidden;
        position: relative;

    }
    .image-panel .item{
        float: left;
        height: 100%;
        width: 100%;
        display: block;
        border-radius: 18px;
    }
    .desc{
        word-break: break-all;
    }
</style>
